<template>
    <div style="text-align: left; margin-left: 200px;">
        <AutoComplete
                v-model="value4"
                icon="ios-search"
                placeholder="input here"
                style="width:300px">
            <div class="demo-auto-complete-item" v-for="(item, index) in data4" :key="index">
                <div class="demo-auto-complete-group">
                    <span><b>{{ item.title }}</b></span>
                </div>
                <!--
                说明:
                    1. 这里绑定click事件是无效的.
                -->
                <Option v-for="option in item.children" :value="option.title" :key="option.title" @click.native="changeOne(item.type, option.id)">
                    <span class="demo-auto-complete-title">{{ option.title }}</span>
                </Option>
            </div>
        </AutoComplete>
        <CheckboxGroup v-model="fruit">
            <Checkbox :label="1">数字1</Checkbox>
            <Checkbox :label="2" :disabled="true">数字2</Checkbox>
            <Checkbox :label="3">数字3</Checkbox>
        </CheckboxGroup>
        <Button type="success" @click="changeTwo">选中2</Button>
        <Button type="primary" @click="cancelChangeTwo">取消选中2</Button>
    </div>
</template>

<script>
    export default {
        name: "AutoCompleteTest",
        data() {
            return {
                fruit: [],
                value4: '',
                data4: [
                    {
                        title: '标准问题',
                        type: 1,
                        children: [
                            {
                                title: 'iView',
                                id: 1
                            },
                            {
                                title: 'iView UI',
                                id: 2
                            }
                        ]
                    },
                    {
                        title: '业务',
                        type: 2,
                        children: [
                            {
                                title: 'iView UI 有多好',
                                id: 3
                            },
                            {
                                title: 'iView 是啥',
                                id: 4
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            cancelChangeTwo() {
                let index = this.fruit.indexOf(2);
                if ( index !== -1 ) {
                    this.fruit.splice(index, 1);
                }
                window.console.log(2, this.fruit);
            },
            changeTwo() {
                let index = this.fruit.indexOf(2);
                if ( index === -1 ) {
                    this.fruit.push(2);
                }
                window.console.log(1, this.fruit);
            },
            handleSearch1 (value) {
                this.data1 = !value ? [] : [
                    value,
                    value + value,
                    value + value + value
                ];
            },
            changeOne(type, id) {
                window.console.log(117, type, id);
            }
        }
    }
</script>

<style scoped>
    .demo-auto-complete-item{
        padding: 4px 0;
        border-bottom: 1px solid #F6F6F6;
    }
    .demo-auto-complete-group{
        font-size: 12px;
        padding: 4px 6px;
    }
    .demo-auto-complete-group span{
        color: #666;
        font-weight: bold;
    }
    .demo-auto-complete-group a{
        float: right;
    }
    .demo-auto-complete-count{
        float: right;
        color: #999;
    }
    .demo-auto-complete-more{
        display: block;
        margin: 0 auto;
        padding: 4px;
        text-align: center;
        font-size: 12px;
    }
</style>